<template>
	<view class="applyWithdrawal" >
		<view class="imageBackground flex-column">
			<view class="text-align_center commission">
				<view style="color: rgb(255, 255, 255);">
					 {{'我的收益('+currency_name+')'}}
				</view>
				<view style="color: rgb(255, 255, 255);font-size: 60rpx;">
					{{promoterGetInfo.surplus_income}}
				</view>
			</view>
			<view class="dataDetail">
				<view class="">
					提现记录
				</view>
				<view class="flex-between " style="margin: 30rpx 0;">
					<view>
						<text class="font32">￥</text>
						<text style="font-size: 56rpx;">{{allCommission}}</text>

					</view>
					<view class="withdrawalBtn flex" @click="allWithdrawals()">
						全部提现
					</view>

				</view>
				<view class="flex-between">
					<view style="color: rgb(153, 153, 153);" v-if="basicConfiguration">
						<text
							style="margin-bottom:10rpx">当前兑换比例1/{{basicConfiguration.recharge_ratio}}</text>
					</view>
					<view style="color: rgb(153, 153, 153);" v-if="basicConfiguration">
						<text
							style="color: red;">手续费{{basicConfiguration.withdrawal_fees_ratio}}%</text><text>，实际到账{{(allCommission-((Math.ceil(Number(basicConfiguration.withdrawal_fees_ratio))?Math.ceil(Number(basicConfiguration.withdrawal_fees_ratio)):0)* allCommission )/100).toFixed(2)}}</text>
					</view>
				</view>
			
			</view>
			<view class="withdrawalType flex-between">

				<view class="flex" v-for="(item, index) in payList" :key="item.value">
					<image class="imgWxx" :src="item.image" mode=""></image>
					<text class="font-weight_bold margin-left_16rpx">{{item.name}}</text>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd">
							<view>
								<radio style="transform:scale(0.7)" :value="item.value" :checked="index == current"
									:disabled="item.disabled" />
							</view>

						</label>
					</radio-group>
				</view>
				<!-- 	<view class="flex">
					<image class="imgWxx" :src="zfb" mode=""></image>
					<text class="font-weight_bold margin-left_16rpx">提现到支付宝</text>
				</view> -->

			</view>
			<view class="zfbCard flex-column-between-start" v-if="form.pay_mode!=3">
				<view class="account-cls padding30 flex-align-center">
					<view class="width100">账户姓名</view>
					<input   placeholder="请输入账户姓名" v-model="form.name" />
				</view>
				<view class="border">

				</view>
				<view class="account-cls padding30 flex-align-center">
					<view class="width100">支付宝号码</view>
					<input type="number" placeholder="请输入支付宝号码" v-model="form.account" />
				</view>
			</view>
			<view class="withdrawalNowBtn flex" @click="withdrawalNowFn()"
				>
				立即提现
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				zfb:this.$img.zfb,
				current: 0,
				tabIndex: 4,
				currency_name:uni.getStorageSync("system").currency_name,
				accountInfo: {
					accountName: '',
					accountNumber: '',

				},
				userInfos: uni.getStorageSync("userInfo"),
				// 用户配置
				userInfo: null,
				// 基本配置
				basicConfiguration: {},
				token: uni.getStorageSync('login').token,
				// 全部佣金
				allCommission: 0,
				// 最多提现额度

				withdrawal_condition: '',
				// 最低提现额度
				everyday_withdrawal_amount: '',
				//" 1 支付宝 2 微信  3 支付宝和微信"
				withdrawal_mode: '',
				deduction_integral_ratio:0,
				// wx zfb
				payList: [ {
					value: '2',
					name: '提现到支付宝',
					image: this.$img.zfb,
					disabled: false,
					checked: 'false',
				},{
					value: '3',
					name: '提现到微信钱包',
					checked: 'true',
					disabled: false,
					image: this.$img.wxicom
				},],
				form: {
					number: '',
					// 1 微信 2 支付宝',
					pay_mode: 2,

					name: '',
					account: ''
				},
				promoterGetInfo:{}
			}
		},
		onLoad() {
			// 获取用户信息
			this.userInformation()
			// 获取基本配置
			this.basicConfigurationFn()
		},
		onShow() {
			this.$at.releaseKey('submit');
		},
		methods: {
			radioChange(e) {
				console.log(e.detail.value)
				if (e.detail.value == 3) {
					this.form.name = ''
					this.form.account = ''
				}
				this.current = Number(e.detail.value) - 2
				this.form.pay_mode = Number(e.detail.value)
			},
			// 申请提现
			withdrawalNowFn() {
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择

						if (!this.form.name && this.form.pay_mode == 2) {
							this.$sun.toast("请输入姓名", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.account && this.form.pay_mode == 2) {
							this.$sun.toast("请输入账号", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.number||this.form.number=='0.00') {
							this.$sun.toast('请填写金额', 'none')
							this.$at.releaseKey('submit');
						} else {
							if (this.form.number > Number(this.basicConfiguration
									.everyday_withdrawal_amount)) {
								this.$sun.toast('已到提现最高金额请联系管理员', 'none')
								this.$at.releaseKey('submit');
							} else if (this.form.number < Number(this.basicConfiguration
									.withdrawal_condition)) {
								this.$sun.toast('最低提现金额不得低于' + Number(this.basicConfiguration
									.withdrawal_condition), 'none')
								this.$at.releaseKey('submit');
							} else {

								console.log(this.form)
								this.$at.releaseKey('submit');
								console.log((this.form))
								const res = await this.$http.post({
									url: this.$api.applyWithdrawal,
									data: {

										...this.form,
										pid:this.promoterGetInfo.id
									},
									headers: {
										'Authorization': this.userInfos.token
									}

								})
								console.log(res)
								if (res.code == 0) {
									// 跳转到登录页面
									
									this.$sun.toast(res.message, 'none')
                                     setTimeout(()=>{
                                     	this.userInformation()
                                     	this.allCommission = 0
                                     	this.form.number =0
                                     	this.$at.releaseKey('submit');
                                     },500)
									// setTimeout(() => {
									// 	this.$sun.navRe('/pages/distribution/distribution')
									// }, 500)
								} else {
									this.$at.releaseKey('submit');
									this.$sun.toast(res.message, 'none')
								}
							}

						}


					}
				});
			},
			allWithdrawals() {
				this.deduction_integral_ratio = Math.floor((this.promoterGetInfo.surplus_income / this.basicConfiguration.recharge_ratio) *
					100) / 100;
				this.allCommission = this.deduction_integral_ratio
				this.form.number =this.promoterGetInfo.surplus_income
			},
			// 获取用户信息
			async userInformation() {
				const result = await this.$http.post({
					url: this.$api.promoterGetInfo,
					data: {
			
			         	id: uni.getStorageSync("loginInfo").id
			
			
					},
					headers: {
						'Authorization': this.userInfos.token
					}
			
				})
			
				if (result.code == 0) {
					console.log('data', result.data);
					this.promoterGetInfo = result.data
			         wx.setStorageSync('promoterGetInfo', this.promoterGetInfo);
			
				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			// 获取基本配置
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': this.userInfos.token
					}

				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data
				
					if (result.data.withdrawal_mode == '2') {
						// this.payList[1].disabled = true
						this.current = 0
						this.form.pay_mode = 3
						this.payList = [{
							value: '1',
							name: '提现到微信钱包',
							checked: 'true',
							disabled: false,
							image: this.$img.wxicom
						}]
					
					} else if (result.data.withdrawal_mode == '1') {
						// this.payList[0].disabled = true
						this.current = 0
						this.form.pay_mode = 2
						this.payList = [{
							value: '2',
							name: '提现到支付宝',
							image: this.$img.zfb,
							disabled: false,
							checked: 'true',
						}]
						// this.payList[0].checked = true
					}
					// 判断当前 是否可以使用那个进行申请
					// if (result.data.withdrawal_mode == '1') {
					// 	this.payList[1].disabled = true
					// 	this.current = 0
					// 	this.form.pay_mode = 2
					// } else if (result.data.withdrawal_mode == '2') {
					// 	this.payList[0].disabled = true
					// 	this.current = 1
					// 	this.form.pay_mode = 3
					// }
				}
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.imageBackground {

		background-repeat: no-repeat;
		background-size: contain;
		background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-17/c2a31202406171956142126.png');

		.commission {
			margin-top: 190rpx;
		}

		.dataDetail {
			margin-top: 26rpx;
			width: 700rpx;
			// height: 264rpx;
			padding: 30rpx;
			border-radius: 20rpx;

			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			background: rgb(255, 255, 255);

			.withdrawalBtn {
				width: 120rpx;
				height: 44rpx;
				border-radius: 42rpx;
				font-size: 24rpx;
				background: rgb(239, 93, 49);
				color: rgb(255, 255, 255);
			}
		}

		.withdrawalType {
			margin-top: 40rpx;
			border-radius: 20rpx;
			width: 700rpx;
			height: 114rpx;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
			background: rgb(255, 255, 255);
			padding: 28rpx 20rpx;

			.imgWxx {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.withdrawalNowBtn {
			margin-top: 96rpx;
			width: 566rpx;
			height: 96rpx;
			border-radius: 64rpx;

			box-shadow: inset 0px 4px 4px 0px rgba(255, 158, 148, 0.32), 0px 4px 4px 0px rgba(254, 82, 65, 0.15);
			background: linear-gradient(100.41deg, rgb(255, 125, 98) 2.1%, rgb(254, 79, 63) 99.742%);
			font-size: 32rpx;
			color: rgb(255, 255, 255);
		}

		.zfbCard {
			margin-top: 40rpx;
			width: 700rpx;
			height: 298rpx;
			border-radius: 20rpx;

			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
			background: rgb(255, 255, 255);
			padding: 16rpx;

			.border {
				border: 1rpx solid rgb(248, 248, 248);
				width: 651rpx;
				height: 0;
			}
		}
	}
</style>